﻿<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>小瘦子爱着小果果</title>
		<link href="css/default.css" type="text/css" rel="stylesheet">

	</head>
	<body>
		<div id="mainDiv">
			<div id="content" style="width: 1110px; height: 625px; margin-top: 10px; margin-left: 396.5px;">
				<div id="code" style="margin-top: 112.5px;">
				Hi!&emsp;亲爱的，有没有一点点小惊喜呀<br>
				从我们第一次见面，到我们第一次约会，第一次一起看电影，第一次牵起你的手，第一次说爱你<br>
				太多太多的第一次，我都历历在目，谢谢你一直<br>
				一来的陪伴，和你在一起的日子我很快乐<br>
				......<br>
				亲爱的小果果，你遇上我算你倒霉了<br>
				我要一直缠着你，爱你一辈子<br>
				宠你一辈子<br>
				嘿嘿，小果果，我爱你
				</div>
				<div id="loveHeart">
					<canvas id="garden" width="670" height="625"></canvas>
					<div id="words">
						<div id="messages">
							小果果，这是我们从相识到现在的时光
							<div id="elapseClock"><span class="digit"></span> days <span class="digit"></span> hours <span class="digit"></span> minutes <span class="digit">38</span> seconds</div>
						</div>
						<div id="loveu">
							稀饭你的<br>
							<div class="signature">- 钟瘦子</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<video src="bg.mp3" autoplay="autoplay" width="0" loop="loop"></video>
		<div id="copyright">
		</div>

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/garden.js"></script>
		<script type="text/javascript" src="js/functions.js"></script>
		<script type="text/javascript">
			var offsetX = $("#loveHeart").width() / 2;
			var offsetY = $("#loveHeart").height() / 2 - 55;
			var together = new Date();
			together.setFullYear(2017, 3, 5);
			together.setHours(12);
			together.setMinutes(30);
			together.setSeconds(0);
			together.setMilliseconds(0);
			if (!document.createElement('canvas').getContext) {
				var msg = document.createElement("div");
				msg.id = "errorMsg";
				msg.innerHTML = "您的浏览器不支持 HTML5!<br/>请使用谷歌浏览器 14+/IE 9+/Firefox 7+/Safari 4+";
				document.body.appendChild(msg);
				$("#code").css("display", "none")
				$("#copyright").css("position", "absolute");
				$("#copyright").css("bottom", "10px");
				document.execCommand("stop");
			} else {
				setTimeout(function () {
					startHeartAnimation();
				}, 5000);
				timeElapse(together);
				setInterval(function () {
					timeElapse(together);
				}, 500);
				adjustCodePosition();
				$("#code").typewriter();
			}
		</script>
	</body>
</html>
